<div class="header-top-area">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="header-top-wraper">
          <div class="row">
            <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
              <div class="menu-switcher-pro">
                <button
                  type="button"
                  id="sidebarCollapse"
                  class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn"
                >
                  <i class="fa fa-bars"></i>
                </button>
              </div>
            </div>
            <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
              <div class="header-top-menu tabl-d-n">
                <ul class="nav navbar-nav mai-top-nav">
                  {{menuItems}}
                </ul>
              </div>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
              <div class="header-right-info">
                <ul class="nav navbar-nav mai-top-nav header-right-menu">
                  <li class="nav-item dropdown">
                    <a
                      href="#"
                      data-toggle="dropdown"
                      role="button"
                      aria-expanded="false"
                      class="nav-link dropdown-toggle"
                    >
                      <i class="fa fa-bell-o" aria-hidden="true"></i>
                      <span class="indicator-nt"></span>
                    </a>
                    <div
                      role="menu"
                      class="notification-author dropdown-menu animated zoomIn"
                    >
                      <div class="notification-single-top">
                        <h1>Notifications</h1>
                      </div>
                      <ul class="notification-menu">
                        {{notifications}}
                      </ul>
                      <div class="notification-view">
                        <a href="#">View All Notification</a>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a
                      href="#"
                      data-toggle="dropdown"
                      role="button"
                      aria-expanded="false"
                      class="nav-link dropdown-toggle"
                    >
                      <i class="fa fa-envelope-o" aria-hidden="true"></i>
                      <span class="indicator-ms"></span>
                    </a>
                    <div
                      role="menu"
                      class="message-author dropdown-menu animated zoomIn"
                    >
                      <div class="message-single-top">
                        <h1>Messages</h1>
                      </div>
                      <ul class="message-menu">
                        {{messages}}
                      </ul>
                      <div class="message-view">
                        <a href="#">View All Messages</a>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a
                      href="#"
                      data-toggle="dropdown"
                      role="button"
                      aria-expanded="false"
                      class="nav-link dropdown-toggle"
                    >
                      <i class="fa fa-user-o" aria-hidden="true"></i>
                    </a>
                    <div
                      role="menu"
                      class="user-info-author dropdown-menu animated zoomIn"
                    >
                      {{userInfo}}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
